<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch">
      <template #resetBefore>
        <Button type="primary mr2" @click="handleExport" >导出</Button>
      </template>
    </CommonDateSearch>
    <a-card class="common-card flex" title="单价分析">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <Line class="chart" :loading="item.loading" :chartData="item.chartData" :title="item.itemName" />
      </div>
    </a-card>
  </PageWrapper>
</template>

<script setup lang="ts">
import Line from '@/components/Charts/Line/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { PageWrapper } from '@/components/Page'
import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
import { getChartChildDivListData,getChildDataCostDiv, exportAirEnergyPrice } from '@/api/common/chart'
import { getDictListByCode } from '@/api/sys/dict'
import { CommonTypeList } from '@/api/common/model/chart'
import { downloadByData } from '@/utils/file/download'
import { Button } from 'ant-design-vue'
defineOptions({ name: 'AirEnergyUnitPrice' })

const searchRef = ref()
const searchInfo = reactive({})
const typeList = ref<CommonTypeList[]>([])
const dictCode = 'energy_unit_price_of_air_conditioning_system'

onMounted(async () => {
  await getTypeList()
  searchRef.value.handleSearch()
})

const handleSearch = (params) => {
  Object.assign(searchInfo, params)
  getChartData()
}

const getTypeList = async () => {
  const res = await getDictListByCode(dictCode)
  typeList.value = res.map((item) => ({
    ...item,
    loading: true,
    chartData: {
      xaxisList: [],
      yaxisList: [],
    },
  }))
}

const getChartData = () => {
  typeList.value.forEach((item) => {
    item.loading = true
    if (item.itemName == '水单价') {
      getChildDataCostDiv({
          ...searchInfo,
          dictCode,
          itemName: item.itemName,
        }).then((res) => {

          item.chartData = res

        })
          .finally(() => {
            item.loading = false
          })

    }else{
      getChartChildDivListData({
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
      })
        .then((res) => {
          item.chartData = res
        })
        .finally(() => {
          item.loading = false
        })
    }
    

  })
}
const handleExport = async () => {
  const { data, headers } = await exportAirEnergyPrice({...searchInfo, dictCode: 'energy_unit_price_of_air_conditioning_system'})
  let contentDisposition = decodeURIComponent(headers["content-disposition"])
  const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)|filename="(.+)"|filename=(.+)/)
  const fileName = filenameMatch[1] || filenameMatch[2] || filenameMatch[3]
  downloadByData(data, fileName)
}
</script>
<style scoped lang="scss">
.common-card {
  flex: 1;

  :deep(.ant-card-body) {
    padding: 4px;

    .chart-box {
      height: 50%;
      padding: 4px;
      overflow: hidden;
    }
  }
}
</style>
